<template>
	<view class="content">
		<view class="top">
			<view class="one">
				订单服务
			</view>
			<view style="height: 110rpx;line-height: 110rpx;color:#D2D2D2 ;">
				-----------
			</view>
			<view class="one">
				订单服务
			</view>
			<view style="height: 110rpx;line-height: 110rpx;color: #D2D2D2;">
				-----------
			</view>
			<view class="one">
				订单服务
			</view>
		</view>

		<view class="midlle">

			<view style="height: 100rpx; width:690rpx;margin-top: 40rpx;display: flex;">
				<image src="../../static/商家@3x.png" style="width: 70rpx;height: 70rpx; margin-top: 20rpx;" />
				<view style="height: 100rpx; margin-left: 30rpx;">
					<view style="height: 50rpx; font-size: 35rpx;font-weight: bolder">伟业汽车美容店</view>
					<view style="height: 50rpx;font-size: 30rpx;font-weight: bolder">山阳区人民中路32号</view>
				</view>
			</view>

			<view style="margin-top: 40rpx;display: flex; left: height: 60rpx;line-height: 60rpx;">
				<image src="../../static/人员@3x.png" style="width: 60rpx;height: 60rpx;" />
				<view style="font-size: 35rpx; margin-left:60rpx;">张三</view>
				<view style="font-size: 35rpx; margin-left:250rpx;">18895039309</view>
			</view>

			<view style="display: flex;margin-top: 50rpx;" @click="tiaozhuan">
				<image src="../../static/车辆-01@3x.png" style="width: 60rpx;height: 60rpx;" />
				<view style="font-size: 35rpx; margin-left:60rpx;">奔驰FWE4/豫A98FHJ</view>
				<image src="../../static/收起箭头小@3x.png" style="width: 50rpx;height: 50rpx;margin-left: 150rpx;" />
			</view>

			<view style="margin-left: 20rpx;margin-top: 50rpx;">
				<view style="display: flex;">
					<view style="font-size: 35rpx;font-weight: bolder;">服务产品</view>
					<view style="font-size: 30rpx;font-weight: bolder;margin-left: 250rpx;">共选择<text
							style="color: aqua;">{{number}}</text>项服务产品</view>
				</view>
				<view style="display: flex;margin-left: 10rpx;margin-top: 20rpx;">
					<view>精洗汽车</view>
					<view style="font-weight: bolder;margin-left: 400rpx;">
						{{this.money}}
					</view>
				</view>
			</view>

			<view style="margin-top: 30rpx;display: flex;" @click="coupons">
				<image src="../../static/优惠券@3x.png" style="width: 100rpx;height: 50rpx;" mode=""></image>
				<view style="font-weight: bolder;margin-left: 30rpx;">{{this.coupon.name}}</view>
				<view v-if="!this.coupon.discount" style="margin-left: 200rpx;">-{{this.coupon.preferentialMoney}}元</view>
				<view  v-else style="margin-left: 200rpx;">
					-{{this.money-this.coupon.discount*this.money*0.1}}
				</view>
				<image src="../../static/收起箭头小@3x.png" style="width: 40rpx;height: 40rpx;margin-left: 20rpx;"></image>
			</view>
		</view>

		<view class="bottom" style="width: 750rpx;display: flex;">
			<view style="height: 130rpx;" @click="toggle('bottom')">
				<image src="../../static/客服@2x.png" style="width: 100rpx;height:100rpx;"></image>
				<view style="height:30rpx;width: 100rpx;font-size:10rpx;margin-top: -10rpx;">联系客服
				</view>
			</view>
			<view style="margin-top: 30rpx;font-weight: bolder;margin-left: 200rpx;">
				合计: ￥<text style="color: red;">{{total}}</text>
			</view>
			<button style="height: 130rpx;line-height: 130rpx;background-color: red;color: white;"
				@click="tanchuang('center')">
				提交订单
			</button>
		</view>
		<view style="margin-top: 20rpx;">
			<textarea name="beizhu" id="" cols="50" rows="10" placeholder="  备注信息"
				style="border: 3rpx solid lightblue; width: 700rpx; border-radius: 25rpx;">  </textarea>
		</view>

		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content">
				<text class="text">
				</text>
				<view
					style="width: 90%; text-align: center;font-size:50rpx;height: 50rpx;line-height:50rpx;border-bottom: 2rpx solid #FFFFFF;margin-bottom: 10rpx;">
					18893029302
				</view>
				<view
					style="width: 90%; text-align: center; font-size:50rpx;height: 80rpx;line-height:80rpx;border-bottom: 2rpx solid #FFFFFF ;margin-bottom: 10rpx;">
					呼叫
				</view>
				<view
					style=" width: 90%; text-align: center;font-size:50rpx;height: 50rpx;line-height:50rpx;border-bottom: 2rpx solid #FFFFFF;"
					@click="cancel">
					取消
				</view>
			</view>
		</uni-popup>

		<!-- 普通弹窗 -->
		<uni-popup ref="tan" background-color="#fff">
			<view class="popup-center">
				<view style="width: 94%;margin-left:3%;margin-top: 10rpx;border-bottom: 2rpx solid #D7D7D7;">
					<view @click="quxiao">
						<image src="../../static/image/错@3x.png" style="width: 30rpx;height: 30rpx;" />
					</view>
					<view style="width: 100%;text-align: center;margin-bottom: 50rpx;">
						<view style="font-size: 35rpx;font-weight: bolder;">
							请输入支付密码
						</view>
						<view style="font-size: 65rpx;font-weight: bolder;margin-top: 40rpx;">
							￥597.00
						</view>
					</view>
				</view>
				<view style="width: 90%;margin-left: 5%;margin-top: 20rpx;">
					<view style="display: flex;">
						<view>
							支付方式
						</view>
						<view style="margin-left: 320rpx;font-weight: bolder;margin-top: 25rpx;">
							零钱
							<image src="../../static/收起箭头小@3x.png"
								style="margin-left: 5rpx;width: 20rpx;height: 20rpx;"></image>
						</view>
					</view>
					<view style="width: 86%;margin-left: 7%;margin-top: 20rpx;">
						<input type="text" v-model="value" placeholder="请输入支付密码" maxlength="6"
							style="width: 100%;background-color: aliceblue;height: 70rpx;" @input="ceshi" />
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money:200,
				number: 1,
				total:200,
				type: 'bottom',
				chuang: 'center',
				value: '',
				couponId:'',
				coupon:{
					preferentialMoney:'',
					triggerMoney:'',
					id:'',
					name:"暂无",
					discount:1
				}
			}
		},
		onLoad(option){
			this.selectcoupons(option.id);
		},
			methods: {
				async selectcoupons(e){
			    try {
			      const response = await uni.request({
			        url: `http://localhost:8080/coupon/coupon_admin/${e}`, // 使用正确的模板字符串拼接 URL
			        header: {
			          'Authorization': 'Bearer ' + uni.getStorageSync('token')
			        },
			        method: 'GET',
					success:(resp) => {
						console.log(resp);
						this.coupon=resp.data.data
						this.couponId=resp.data.data.id
						if(resp.data.data.discount==null&&resp.data.data.triggerMoney<=this.money){
							this.total=this.money-resp.data.data.preferentialMoney	
						}else if(resp.data.data.discount!=null){
							this.total=this.money*resp.data.data.discount*0.1
						}else{
							this.total=this.money
						}
					},
					
			      });
			
			      console.log(response);
			    } catch (error) {
			      console.error('请求失败：', error);
			      uni.showToast({
			        title: '请求失败，请稍后再试',
			        icon: 'none'
			      });
			    }
				},
			  coupons(){
					uni.navigateTo({
						url:"/pages/coupons/coupons?money="+this.money
					})
				},
				toggle(type) {
					this.type = type
					// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
					this.$refs.popup.open(type)
				},
				cancel() {
					this.$refs.popup.close()
				},
				tanchuang(type) {
					this.chuang = type
					this.$refs.tan.open(type)
				},
				quxiao() {
					this.$refs.tan.close()
				},
				ceshi(event) {
					//console.log(event.detail.value)
					if (this.value.length == 6) {
						console.log("支付成功");
						
						uni.request({
							url: "http://localhost:8080/merchant/orders",
							header: {
								'Authorization': 'Bearer ' + uni.getStorageSync('token')
							},
							method: "POST",
							data:{
								uid:1,//店铺id
								mid:1,//用户id
								service_id:1, //服务详情编号id
								service_type_id: 1, //服务类别id
								car_id: 1, //订单车辆id号
								platform_coupon_id:this.couponId, //平台优惠卷id【每次只用使用一张】
								shop_coupon_id:this.couponId, //商家优惠卷id【每次只用使用一张】
								price: this.total, //实付金额
								pay_type: 0, //支付方式（0微信、1支付宝、2银行卡）
								status:1,//订单状态（0待支付、1待使用、2待评价、3已取消、4已退款、5已完成）
							},
							success: (resp) => {
								console.log(resp)
								this.baseFormData=resp.data
							}
						})
						
						uni.navigateTo({
							url: "/pages/orderPayment/orderPayment"
						})
					}
				},
				tiaozhuan() {
					uni.navigateTo({
						url: "/pages/myVehicle/myVehicle"
					})
				}
			}
	}
</script>

<style lang="less">
	page {
		width: 750rpx;
		background-color: white;
	}

	.content {
		width: 710rpx;
		padding-left: 20rpx;
		padding-top: 20rpx;
		padding-right: 20rpx;
		position: relative;
		height: 100vh;
	}

	.top {
		padding-left: 50rpx;
		display: flex;
		height: 120rpx;
		text-align: center;
		margin-bottom: 40rpx;
	}

	.one {
		padding: 10rpx;
		width: 110rpx;
		font-size: 38rpx;
		border: 2rpx solid #D2D2D2;
		text-align: center;
		height: 110rpx;
		line-height: 55rpx;
		border-radius: 50%;
	}

	.midlle {
		width: 690rpx;
		margin-left: 20rpx;

	}

	.bottom {
		position: absolute;
		bottom: 0rpx;
	}

	.popup-height {
		height: 300rpx;
		width: 200px;
	}

	.popup-content {

		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 100px;
		background-color: #fff;
	}

	.popup-center {
		width: 600rpx;
		height: 450rpx;
		background-color: white;
	}
</style>